import React, { useState } from 'react';
import { connect } from 'umi';
import { Form, Input, Button, message, Row, Col, TreeSelect } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
export interface SelectProps {
  children: any;
  onSearch: (values: any) => void;
  treeData: any;
}
const SearchForm: React.FC<SelectProps> = (props: SelectProps) => {
  const [form] = Form.useForm();
  const [categoryId, setCategoryId] = useState();
  const search = (values: any) => {
    if (typeof props.onSearch === 'function') {
      props.onSearch(values);
    }
  };
  const handleReset = () => {
    form.resetFields();
    message.success('重置完成');
  };

  const onCateSelChange = (value: any) => {
    setCategoryId((categoryId) => value);
  };

  return (
    <>
      <Form form={form} onFinish={search}>
        <Row gutter={4}>
          <Col span={6}>
            <Form.Item name="title">
              <Input placeholder="请输入产品名称" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="categoryId">
              <TreeSelect
                allowClear
                style={{ width: 210 }}
                value={categoryId}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={props.treeData}
                placeholder="请选择分类"
                treeDefaultExpandAll
                onChange={onCateSelChange}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item>
              <span style={{ float: 'right' }}>
                <Button.Group style={{ margin: '0 16px' }}>
                  <Button
                    type="primary"
                    icon={<SearchOutlined />}
                    htmlType="submit"
                    title="查询"
                    style={{ zIndex: 3 }}
                  >
                    查询
                  </Button>
                  <Button icon={<ReloadOutlined />} onClick={handleReset} title="重置">
                    重置
                  </Button>
                  {props.children}
                </Button.Group>
              </span>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </>
  );
};
// export default SearchForm;
export default connect(({ Abp, Category }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
  Category,
}))(SearchForm);
